<template>
	<view class="page-box">
		<view class="header-nav">
			<view style="display: flex;justify-content: space-between;">
				<view style="display: flex;">
					<button plain class="back-btn" @click="goBack">返回</button>
					<span style="margin:0 18rpx 0 33rpx;">|</span>
					<span>同步课程</span>
				</view>

				<view class="nav-select">
					<view class="nav-select-item" @click="openTextBook">
						<span>冀教版（2022）_七下</span>
						<image src="@/static/images/tongbu/xuanze.png" alt="" />
					</view>
					<view class="nav-select-item" @click="openUnit">
						<span>Unit7</span>
						<image src="@/static/images/tongbu/xiala.png" alt="" />
					</view>
					<view class="nav-select-item">
						<span>词汇</span>
						<image src="@/static/images/tongbu/xiala.png" alt="" />
					</view>
				</view>
				<image class="help" src="@/static/images/tongbu/help.png" alt="" />
			</view>
			<view class="header-nav-tab">
				<!-- <view class="header-nav-tab-item" :class="current === item.id ? 'active':''" v-for="item in tabList"
					@click="changeTab(item.id)" :key="item.id">
					{{item.name}}
				</view> -->

				<view class="header-nav-tab-item" :class="current === item.id? 'active':''" v-for="item in tabList"
					@click="changeTab(item.id)" :key="item.id"
					:style="progressStyles.find(ps => ps['--progress-value'] === item.progress / 100)">
					{{item.name}}
				</view>
			</view>

		</view>
		<view class="content-sync">
			<view class="content-sync-top">
				<view class="content-sync-top-item">
					预习
				</view>
				<view style="display: flex;align-items: center;">
					<view class="content-sync-top-item" @click="toFollow">
						例句跟读
					</view>
					<view class="must-tag">
						必学
					</view>
				</view>
				<view style="display: flex;align-items: center;">
					<view class="content-sync-top-item">
						例句抄写
					</view>
					<view class="must-tag">
						必学
					</view>
				</view>
			</view>
			<view class="content-sync-center">
				<view class="content-sync-center-l">
					<view class="left-btn">
						<view class="left-btn-item" @click="toListenWords">
							<span class="must-study">必学</span>
							<view class="left-btn-item-text">
								<span>智能听词</span>
								<span class="left-btn-item-num">0/18</span>
							</view>
						</view>
						<view class="left-btn-item" @click="toReadWords">
							<span class="must-study">必学</span>
							<view class="left-btn-item-text">
								<span>智能读词</span>
								<span class="left-btn-item-num">0/18</span>
							</view>
						</view>
						<view class="left-btn-item" @click="toSmartSay">
							<span class="must-study">必学</span>
							<view class="left-btn-item-text">
								<span>智能说词</span>
								<span class="left-btn-item-num">0/18</span>
							</view>
						</view>
					</view>
					<image src="@/static/images/tongbu/left-tongbu.png" alt="" class="left-line" />
					<view class="left-line-text">
						听说训练
					</view>
				</view>
				<view class="">
					<view class="content-sync-center-c">
						<span class="must-study-cirle">必学</span>
						<image src="@/static/images/tongbu/renzi-dian.png" alt="" class="renzi-dian" />
						<span class="literacy">智能认字</span>
					</view>
					<view class="content-sync-center-c-num">
						0/18
					</view>
				</view>

				<view class="content-sync-center-l">

					<view class="left-line-text">
						读写训练
					</view>
					<image src="@/static/images/tongbu/right-tongbu.png" alt="" class="left-line" />
					<view class="left-btn">
						<view class="left-btn-item" @click="toDictate">
							<view class="left-btn-item-text">
								<span>智能听写</span>
								<span class="left-btn-item-num">0/18</span>
							</view>
							<span class="must-study" style="border-radius: 0 10rpx 10rpx 0;">必学</span>
						</view>
						<view class="left-btn-item" @click="toDictation">
							<view class="left-btn-item-text">
								<span>智能默写</span>
								<span class="left-btn-item-num">0/18</span>
							</view>
							<span class="must-study" style="border-radius: 0 10rpx 10rpx 0;">必学</span>
						</view>
						<view class="left-btn-item" @click="toWording">
							<view class="left-btn-item-text">
								<span>智能用词</span>
								<span class="left-btn-item-num">0/18</span>
							</view>
							<span class="must-study" style="border-radius: 0 10rpx 10rpx 0;">必学</span>
						</view>
					</view>

				</view>
			</view>
			<view class="content-sync-bottom">
				<view class="flex-align-center">
					<image src="@/static/images/review/cihuiceshi.png" class="content-sync-bottom-img1"
						@click="toVocabularyTest"></image>
					<image src="@/static/images/review/zhinengfuxi.png" class="content-sync-bottom-img1"
						style="margin-left: 100rpx;" @click="toReview"></image>
				</view>
				<view class="flex-align-center">
					<image src="@/static/images/review/bixuejiangli.png" class="content-sync-bottom-img2"></image>
					<image src="@/static/images/review/tongguanlibao.png" class="content-sync-bottom-img2"
						style="margin-left: 41rpx;"></image>
				</view>
			</view>
		</view>
		<view class="bottom-tip">
			<view class="">
				今日学习效率:0%（00:00/00:00）
			</view>
			<view class="">
				今日词汇记忆 时长：00:00 数量：0个 速度：0个/小时
			</view>
		</view>
		<!--  -->
		<view class="demo-train">
			<view style="width: 37rpx;text-align: center;">
				例句训练
			</view>
			<image src="@/static/images/tongbu/xunlian-you.png" alt="" class="xunlian-you" />
		</view>
		<UnitSelect ref="UnitSelect"></UnitSelect>
		<TextbookSelect ref="TextbookSelect"></TextbookSelect>

	</view>
</template>

<script>
	import UnitSelect from '@/components/UnitSelect/UnitSelect.vue';
	import TextbookSelect from '@/components/TextbookSelect/TextbookSelect.vue'
	export default {
		components: {
			UnitSelect,
			TextbookSelect
		},
		data() {
			return {
				show: true,
				showUnit: false,
				current: 0,
				tabList: [{
						id: 0,
						name: '词汇一',
						value: 10,
						progress: 60 // 初始进度为 0
					},
					{
						id: 1,
						name: '词汇二',
						value: 20,
						progress: 0
					}
				]
			}
		},
		computed: {
			progressStyles() {
				return this.tabList.map(item => {
					return {
						'--progress-value': item.progress / 100
					};
				});
			}
		},
		methods: {
			// 跳转智能复习
			toReview() {
				uni.navigateTo({
					url: '/pages/review/review'
				})
			},
			// 打开单元选择
			openUnit() {
				this.$refs.UnitSelect.open()
			},
			openTextBook() {
				this.$refs.TextbookSelect.open()
			},
			updateProgress(tabId, newProgress) {
				this.tabList.forEach(item => {
					if (item.id === tabId) {
						item.progress = newProgress;
					}
				});
			},
			changeTab(val) {
				this.current = val;
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 单词跟读
			toFollow() {
				uni.navigateTo({
					url: '/pages/syncUpCourse/components/follow/follow'
				})
			},
			// 智能用词
			toWording() {
				uni.navigateTo({
					url: '/pages/syncUpCourse/components/wording/wording'
				})
			},
			// 智能默写
			toDictation() {
				uni.navigateTo({
					url: '/pages/syncUpCourse/components/dictation/dictation'
				})
			},
			// 智能听写
			toDictate() {
				uni.navigateTo({
					url: '/pages/syncUpCourse/components/dictate/dictate'
				})
			},
			// 智能说词
			toSmartSay() {
				uni.navigateTo({
					url: '/pages/syncUpCourse/components/smartSay/smartSay'
				})
			},
			// 智能听词
			toListenWords() {
				uni.navigateTo({
					url: '/pages/syncUpCourse/components/listenWords/listenWords'
				})
			},
			// 智能读词
			toReadWords() {
				uni.navigateTo({
					url: '/pages/syncUpCourse/components/readWords/readWords'
				})
			},
			// 词汇测试
			toVocabularyTest() {
				uni.navigateTo({
					url: '/pages/syncUpCourse/components/vocabularyTest/vocabularyTest'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@function px_2_vw($px) {
		@return #{$px * 100 / 1920}vw;
	}


	// @function px_2_vw($px) {
	// 	// @return $px * 100 / 1040;
	// 	@return #{$px * 100 / 1040}vh;
	// }

	.page-box {
		background: radial-gradient(50% 50% at 50% 50%, rgba(15, 38, 245, 0) 0%, rgba(15, 38, 245, 0.22) 6.25%, rgba(15, 38, 245, 1) 100%);
	}

	.header-nav {
		width: 100%;
		height: px_2_vw(170) !important;
		padding: 40rpx 40rpx 60rpx 40rpx;
		border-bottom: 1px solid rgba(255, 255, 255, 1);
		color: #fff;
		line-height: px_2_vw(51) !important;
		position: relative;

		.help {
			width: px_2_vw(67);
			height: px_2_vw(60);
			// position: absolute;
			// right: 27rpx;
			// top: 31rpx;
		}
	}

	.nav-select {
		display: flex;
		// margin-left: 428rpx;

		.nav-select-item {
			background: #6373FF;
			padding: 0 15rpx;
			margin-right: 34rpx;
			border-radius: 41px;
			display: flex;
			align-items: center;

			image {
				height: px_2_vw(37);
				width: px_2_vw(37);
			}
		}
	}

	.header-nav-tab {
		position: absolute;
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: center;
		bottom: 0;

		.header-nav-tab-item {
			width: px_2_vw(140);
			height: 70rpx;
			border: 1rpx soild #000;
			text-align: center;
			// margin-right: 200rpx;
			position: relative;
		}


	}

	.active {}

	.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: px_2_vw(140);
		height: 5rpx;
		border: 1px solid rgba(255, 255, 255, 1);
		margin-top: 10rpx;

	}

	.active::before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		height: 5rpx;
		background-color: transparent;
		z-index: -1;
		background: linear-gradient(to right, #4CAF50 0%, #4CAF50 var(--progress-width), transparent var(--progress-width));
		--progress-width: calc(140px * var(--progress-value));
	}

	.content-sync {
		margin-top: 30rpx;

		.content-sync-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 40%;
			margin: 0 auto;

			.content-sync-top-item {
				color: #fff;
				width: px_2_vw(180);
				height: px_2_vw(60);
				text-align: center;
				line-height: px_2_vw(60);
				background: #6373FF;
				border-radius: 15.82rpx;
				font-size: 36rpx;
			}

			.must-tag {
				width: 17rpx;
				height: 36rpx;
				color: #fff;
				border-right: 1px solid #FFFFFF;
				font-size: 12rpx;
				background: #0DBDE0;
				border-radius: 0 10rpx 10rpx 0rpx;
			}
		}

		.content-sync-center {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx 160rpx;

			.content-sync-center-l {
				display: flex;
				align-items: center;

				.left-btn {
					height: px_2_vw(520);
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.left-btn-item {
						display: flex;
						align-items: center;

						// margin-bottom: 10rpx;

						.must-study {
							background: #0DBDE0;
							border-radius: 10rpx 0 0 10rpx;
							color: #fff;
							width: px_2_vw(40);
							height: px_2_vw(98);
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							text-align: center;
						}

						.left-btn-item-text {
							display: flex;
							justify-content: space-between;
							background: #FFFFFF;
							font-weight: 600;
							border-radius: 6px;
							width: px_2_vw(329);
							height: px_2_vw(113);
							line-height: px_2_vw(113);
							padding: 0rpx 35rpx;
							font-size: 36rpx;
						}

						.left-btn-item-num {
							font-size: 20rpx;
							font-weight: 400;
						}
					}
				}

				.left-line {
					width: px_2_vw(70);
					height: px_2_vw(480);
				}

				.left-line-text {
					width: px_2_vw(48);
					height: px_2_vw(174);
					color: #fff;
					margin-left: 24rpx;
					font-size: 30rpx;
				}
			}

			.content-sync-center-c {
				width: px_2_vw(461);
				height: px_2_vw(443);
				background-image: url('../../static/images/tongbu/renzi.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				display: flex;
				flex-direction: column;
				align-items: center;

				// .center-bj {
				// 	width: px_2_vw(461);
				// 	height: px_2_vw(443);
				// }
				.renzi-dian {
					width: px_2_vw(48);
					height: px_2_vw(44);
					margin-top: 30rpx;
				}

				.must-study-cirle {
					background: #0DBDE0;
					border-radius: 10rpx;
					color: #fff;
					width: px_2_vw(83);
					height: px_2_vw(37);
					border: 1px solid #fff;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					text-align: center;
					margin-top: -20rpx;
				}

				.literacy {
					width: px_2_vw(176);
					height: px_2_vw(209);
					font-weight: 600;
					font-size: 72rpx;
					text-align: center;
					margin-top: 28rpx;

				}
			}

			.content-sync-center-c-num {
				font-size: 60rpx;
				font-weight: 400;
				color: #fff;
				text-align: center;
				margin-top: 37rpx;

			}

			.content-sync-center-r {}
		}

		.content-sync-bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0rpx 160rpx;

			.content-sync-bottom-img1 {
				width: px_2_vw(187);
				height: px_2_vw(72);
				scale: 1.2;
			}

			.content-sync-bottom-img2 {
				width: px_2_vw(81);
				height: px_2_vw(84);
			}
		}
	}

	.bottom-tip {
		position: absolute;
		bottom: 22rpx;
		display: flex;
		justify-content: space-between;
		color: #fff;
		font-size: 24rpx;
		width: 80%;
		padding-left: 20%;
	}

	.demo-train {
		color: #fff;
		width: px_2_vw(64);
		height: px_2_vw(188);
		background: #6373FF;
		border: 1px solid #FFFFFF;
		position: absolute;
		right: 0;
		top: 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		border-radius: 13rpx 0 0 13rpx;

		.xunlian-you {
			width: px_2_vw(29);
			height: px_2_vw(29);
			margin-top: 10rpx;
		}

	}
</style>